<template>
    <div class="container">
		<h3>还款记录</h3>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="180px" class="demo-ruleForm">
           <el-table
               :data="tableData"
               border
               style="margin-top:20px;"
               ref="multipleTable"
               header-cell-class-name="table-header"
           >
               <el-table-column prop="name" sortable label="还款人"></el-table-column>
               <el-table-column prop="repaymentTime" sortable label="还款时间"></el-table-column>
           	<el-table-column prop="repaymentNum" sortable label="还款期数"></el-table-column>
           	<el-table-column prop="amount" sortable label="还款金额"></el-table-column>
           	<el-table-column prop="surplusNum" sortable label="剩余周期"></el-table-column>
           	<el-table-column prop="repaidAmount" sortable label="已还金额"></el-table-column>
           	<el-table-column prop="surplusAmount" sortable label="剩余还款"></el-table-column>
               <el-table-column sortable label="操作">
                  <template slot-scope="scope">
					  <div v-if="scope.row.status == 2">已还款</div>
                    <el-button
						v-if="scope.row.status == 1"
                        type="text"
                        @click="repaymment(scope.$index, scope.row)"
                    >确认还款</el-button>
					<div v-if="scope.row.status != 1 && scope.row.status != 2">
						确认还款
					</div>
                  </template>
               </el-table-column>
           </el-table>
           <el-pagination
               layout="total, prev, pager, next, jumper"
               :page-size="pagesize1"
               :current-page.sync="page"
               :total="total1"
               @current-change="handleCurrentChange1"
               style="margin-top: 20px"
           ></el-pagination>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import axios from "axios"
import uploadImg from '../../../common/uploadImg';
export default {
	components: {
	    uploadImg
	},
    data() {
        return {
			pagesize1:10,
			page:1,
			total1:0,

			tableData:[],
			amount:{},
			backname:{},
			bankShow:false,
			bankList:[],
			subBank:[],
            rules: {},
			id:''
        };
    },
    mounted() {
		this.id = this.$route.query.id
        this.init();

    },
    methods: {
		handleCurrentChange1(val){

			this.page = val;
			this.init();
		},

		// 返回上一页
        backPage() {
            this.$router.go(-1);
        },
		// 获取详情
        init(){
			let data = {
				loanId:this.id,
				page:this.page
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/repayment/findByList",data).then((res)=>{
				this.tableData = res.data.rows
				this.total1 = res.data.total
			})
		},
		repaymment(index,row){
			this.$confirm('是否确认还款', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			}).then(() => {
				 let data = {
					 id:row.id,
					 status:2,
					 loanId:row.loanId
				 }
				axios.post("https://bbgy.cpzsyun.com:82/api/control/repayment/save",data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '已确认还款',
					    type: 'success',
					    duration:1000
					});
					this.backPage()
				})
			})
		},
    }
};
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>
